<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>



  <!-- 
    json 一种数据传输格式，以对象为样板，本质上就是对象，对象是本地使用的，json是用来传输的
    
  -->

  <script>
    // JSON.parse()   String-> json
    // JSON.stringify()  json -> String


    // domRree + cssTree  = randerTree

    // rander避免重构
    // reflow 重拍  dom节点的删除，添加，
    // dom节点的宽高变化，位置变化 display none -> block  


    // repaint 重绘  改改颜色之类的


    // defer  当dom树解析完后，才会被执行，只有ie能用

    // async 异步加载，加载完就执行，async只能加载外部脚本

    // 当dom加载完，再执行 test
    // script.onload = function () {
    //   test()
    // }

    // ajax 让js发送http请求，与后台通信，获取数据和信息
    // 第一步创建ajax

    // var xhr = new XMLHttpRequest()

    // 第二步，设置请求，发送请求地址，发送请求的方式
    // get:表单提交的数据会拼接到请求的路径里，效率高
    // post:会将表单的数据防止到请求的body里，数据大，安全
    // xhr.open("get", "http://127.0.0.1:8848")

    // 第三部发送数据
    // xhr.send()
    // xhr.send("username=admin&passwprd=123")

    // 第四部 设置监听事件，监听后台是否返回数据
    // xhr.onreadystatechange = function () {
    //   if (xhr.status == 200 && xhr.readyState == 4) {
    //     console.log(成功获取数据);
    //     console.log(xhr);
    //     console.log(xhr.responseText);
    //     console.log(xhr.status);
    //     console.log(xhr.readyState);


        // 第五步，处理数据
    //     var res = xhr.response
    //     var h1 = document.createElement('h1')
    //     h1.innerHTML = res
    //     document.appendChild(h1)
    //   }
    // }



      // 封装ajax



      // 同源策略  同源即 协议,域名,端口相同,浏览器出于安全方面考虑,只允许本域名下的接口交互

      // http://127.0.0.1:8080   http为协议 127.0.0.1为域名 8080为端口

      

  </script>
</body>

</html>